<template>
  <el-card class="content">
    <el-table :data="tableData" stripe>
      <el-table-column prop="tailingPondName" label="尾矿库名称" align="center">
      </el-table-column>
      <el-table-column prop="accidentTypeName" label="事故类型" align="center">
      </el-table-column>
      <el-table-column prop="accidentContent" label="事故内容" align="center">
      </el-table-column>
      <el-table-column prop="userName" label="接受人" align="center">
      </el-table-column>
      <el-table-column prop="reportTime" label="接管时间" align="center">
      </el-table-column>
      <el-table-column prop="status" label="处理状态" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === 0" type="success" size="mini"
            >已处理</el-button
          >
          <el-button v-if="scope.row.status === 1" type="danger" size="mini"
            >未处理</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[10, 15]"
        :page-size="query.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-row>
  </el-card>
</template>

<script>
import { getAccidentReportByPage } from "../../api/help";
export default {
  name: "WarningReception",
  data() {
    return {
      total: 0,
      query: {
        page: 1,
        pagesize: 10,
      },
      tailingPondId: "",
      tableData: [],
    };
  },
  mounted() {
    this.tailingPondId = sessionStorage.getItem("sensorId");
    this.getlist();
  },
  methods: {
    handleSizeChange(val) {
      this.query.pagesize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getlist();
    },
    //分页查询
    async getlist() {
      await getAccidentReportByPage({
        tailingPondId: this.tailingPondId,
        pageCount: this.query.page,
        pageSize: this.query.pagesize,
      }).then((res) => {
        if (res.resultCode == "200") {
          this.tableData = res.parameter.list;
          this.total = res.parameter.total;
        } else {
          this.tableData = [];
        }
      });
    },
  },
};
</script>

<style scoped>
.content {
  margin-left: 0.08rem;
  height: 90vh;
}
.el-table {
  margin-bottom: 0.15rem;
  display: block;
  height: 75vh;
  overflow: auto;
  text-align: center;
}
.el-table::before {
  z-index: inherit;
}
</style>